<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>表单练习</title>
        <link href="payment-form.css" rel="stylesheet">
    </head>

    <body>
        <form>
            <h1>Payment Form</h1>
            <p>Required fields are followed by <strong>*</strong></p>

            <section>
                <h2>Content information</h2>

                <fieldset>
                    <legend>Personnal informaion</legend>
                    <ul>
                        <li>
                            <label for="title_1">
                                <input id="title_1" type="radio" 
                                    name="title" value="Mister">
                                Mister
                            </label>
                        </li>
                        <li>
                            <label for="title_2">
                                <input id="title_2" type="radio" 
                                    name="title" value="Miss">
                                Miss
                            </label>
                        </li>
                    </ul>
                </fieldset>

                <p>
                    <label for="name">
                        <span>Name: </span>
                        <strong>*</strong>
                    </label>
                    <input id="name" type="text" name="username">
                </p>
                <p>
                    <label for="mail">
                        <span>E-mail: </span>
                        <strong>*</strong>
                    </label>
                    <input id="mail" type="email" name="usermail">
                </p>
                <p>
                    <label for="pwd">
                        <span>Password: </span>
                        <strong>*</strong>
                    </label>
                    <input id="pwd" type="password" name="password">
                </p>
            </section>

            <section>
                <h2>Payment information</h2>
                <p>
                  <label for="card">
                    <span>Card type:</span>
                  </label>
                  <select id="card" name="usercard">
                    <option value="visa">Visa</option>
                    <option value="mc">Mastercard</option>
                    <option value="amex">American Express</option>
                  </select>
                </p>
                <p>
                  <label for="number">
                    <span>Card number:</span>
                    <strong>*</strong>
                  </label>
                    <input type="number" id="number" name="cardnumber">
                </p>
                <p>
                  <label for="date">
                    <span>Expiration date:</span>
                    <strong>*</strong>
                    <em>formatted as mm/yy</em>
                  </label>
                  <input type="date" id="date" name="expiration">
                </p>
            </section>
        </form>
    </body>
</html>